import "./style.scss";
import { Col, Row, Card } from "antd";
import BuySellIcon from "@/assets/photos/smart-sell.png";
import FollowIcon from "@/assets/photos/smart-follow.png";
import RunIcon from "@/assets/photos/smart-run.png";
import { useTranslation } from "react-i18next";

const SecondHomePage = () => {
  const { t } = useTranslation();

  return (
    <div className="second-home-page-pc">
      <Row className="row-one">
        <Col span={24}>
          <div className="second-slogan">
            <div>
              <span className="normal">{t("SeeIsGain")}</span>
            </div>
            <span className="normal">{t("CatchByOneKey")}</span>
            <span className="high">1000</span>
            <span className="normal">{t("TimesGrowth")}</span>
          </div>
          <div className="description">
            {t("IntelligentHighSpeedMultiChain")}，
            {t("SecurityTesting")}
          </div>
        </Col>
      </Row>
      <Row className="card-row">
        <Col xs={24} sm={24} md={24} lg={8} xl={8} xxl={8}>
          <Card className="llr">
            <img src={BuySellIcon} alt=""/>
            <div>{t("OneKeyBuySell")}</div>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={24} lg={8} xl={8} xxl={8}>
          <Card className="middle">
            <img src={FollowIcon} alt=""/>
            <div>{t("OneKeyTracking")}</div>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={24} lg={8} xl={8} xxl={8}>
          <Card className="rrl">
            <img src={RunIcon} alt=""/>
            <div>{t("OneKeyRace")}</div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default SecondHomePage;
